<form class="ui form" data-tea-action="/proxy/update" data-tea-success="submitSuccess">
	<input type="hidden" name="serverId" :value="server.id"/>
	<table class="ui table selectable definition">
		<tr>
			<td class="title">代理服务名称</td>
			<td>
				<input type="text" name="description" v-model="server.description" maxlength="100"/>
				<p class="comment">给此服务起一个易懂的名称</p>
			</td>
		</tr>
		<tr>
			<td class="title">是否开启HTTP</td>
			<td>
				<div class="ui checkbox">
					<input type="checkbox" name="httpOn" value="1" v-model="server.http"/>
					<label></label>
				</div>
			</td>
		</tr>
		<tr>
			<td>域名<em>(name)</em></td>
			<td colspan="2">
				<div class="names-box">
					<span class="ui label tiny" v-for="(name, arrayIndex) in server.name" :class="{blue:nameEditingIndex == arrayIndex}">{{name}}
						<input type="hidden" name="name" :value="name"/> &nbsp;
						<a href="" @click.prevent="editName(arrayIndex)" title="修改"><i class="icon pencil"></i></a>
						<a href="" @click.prevent="removeName(arrayIndex)" title="删除"><i class="icon remove"></i></a>
						<a title="拖动改变顺序" v-if="server.name.length > 1"><i class="icon bars handle"></i></a>
					</span>
				</div>
				<div class="ui fields inline" v-if="nameAdding" style="margin-top:0.8em">
					<div class="ui field">
						<input type="text" name="addingNameName" style="width:16em" maxlength="100" placeholder="域名，比如example.com" @keyup.enter="confirmAddName()" @keypress.enter.prevent="1" v-model="addingNameName" />
					</div>
					<div class="ui field">
						<button class="ui button tiny" type="button" @click="confirmAddName()">确定</button>
						&nbsp; <a href="" @click.prevent="cancelNameAdding()">取消</a>
					</div>
				</div>
				<div class="ui field" style="margin-top: 1em">
					<button class="ui button tiny" type="button" @click="addName()">+</button>
				</div>
				<p class="comment">用户可以访问的域名，可以使用星号通配符（*）来表示匹配一组域名，比如www.example.com *.google.com。<a href="https://wanwang.aliyun.com/domain/com/?spm=5176.10695662.1158081.1.59854234sBN4rF" target="_blank">去阿里云注册域名 &raquo;</a> </p>
			</td>
		</tr>
		<tr>
			<td>绑定地址<em>(listen)</em></td>
			<td colspan="2">
				<div class="listens-box">
					<span class="ui label tiny" v-for="(listen, arrayIndex) in server.listen" :class="{blue:arrayIndex == editingListenIndex}">{{listen}}
						<input type="hidden" name="listen" :value="listen"/> &nbsp;
						<a href="" @click.prevent="editListen(arrayIndex)" title="修改"><i class="icon pencil"></i></a>
						<a href="" @click.prevent="removeListen(arrayIndex)" title="删除"><i class="icon remove"></i></a>
						<a title="拖动改变顺序" v-if="server.listen.length > 1"><i class="icon bars handle"></i></a>
					</span>
				</div>
				<div class="ui fields inline" v-if="listenAdding" style="margin-top:0.8em">
					<div class="ui field">
						<input type="text" name="addingListenName" style="width:18em" maxlength="100" placeholder="绑定的网络地址，比如 0.0.0.0:80" @keyup.enter="confirmAddListen()" @keypress.enter.prevent="1" v-model="addingListenName" />
					</div>
					<div class="ui field">
						<button class="ui button tiny" type="button" @click="confirmAddListen()">确定</button>
						&nbsp; <a href="" @click.prevent="cancelListenAdding()">取消</a>
					</div>
				</div>
				<div class="ui field" style="margin-top: 1em">
					<button class="ui button tiny" type="button" @click="addListen()">+</button>
				</div>
				<p class="comment" style="padding-bottom:0;margin-bottom:0.4em">绑定的服务器端的网络地址。</p>
				<p class="comment" style="padding-top:0;margin-top:0">要想通过服务器的所有IP地址都能访问到服务，可以将IP地址写成"0.0.0.0:端口"，支持端口范围，比如"0.0.0.0:[8100-8200]"。</p>
			</td>
		</tr>
		<tr>
			<td>使用MITM模式</td>
			<td>
				<div class="ui checkbox">
					<input type="checkbox" name="forwardHTTPEnableMITM" value="1" v-model="server.forwardHTTP.enableMITM"/>
					<label></label>
				</div>
				<p class="comment">支持对HTTPS的通讯内容获取，需要安装并信任TeaWeb专用根证书，具体请<a href="http://teaos.cn/doc/forward-proxy/Index.md" target="_blank">参考文档</a>。</p>
			</td>
		</tr>

		<tr>
			<td colspan="2">
				<a href="" style="font-weight: normal;" v-if="!advancedOptionsVisible" @click.prevent="showAdvancedOptions()">更多选项<span style="font-size:0.8em;color:grey!important;">（日志等）</span> <i class="icon angle down"></i> </a>
				<a href="" style="font-weight: normal;" v-if="advancedOptionsVisible" @click.prevent="showAdvancedOptions()">收起选项 <i class="icon angle up"></i> </a>
			</td>
		</tr>

		<tbody v-show="advancedOptionsVisible" v-for="(accessLog, index) in accessLogs">
			<tr>
				<td class="color-border">是否开启访问日志存储</td>
				<td>
					<input type="hidden" name="accessLogIndexes" :value="index"/>
					<input type="hidden" :name="'accessLog' + index + 'Id'" :value="accessLog.id"/>
					<div class="ui checkbox">
						<input type="checkbox" :name="'accessLog' + index + 'On'" v-model="accessLog.on" value="1"/>
						<label></label>
					</div>
					<p class="comment">关闭访问日志，并不影响统计的运行</p>
				</td>
			</tr>
			<tr v-show="accessLog.on">
				<td class="color-border">要存储的访问日志字段</td>
				<td>
					<div class="ui checkbox" v-for="field in accessLog.fields"  style="width:11em;padding:0.4em 0.4em 0.4em 0">
						<input type="checkbox" :name="'accessLog' + index + 'Fields'" :value="field.code" :id="'access-log-' + index + '-field-' + field.code" v-model="field.isChecked"/>
						<label :for="'access-log-' + index + '-field-' + field.code">{{field.name}}</label>
					</div>
				</td>
			</tr>
			<tr v-show="accessLog.on">
				<td class="color-border">要存储的访问日志状态码</td>
				<td>
					<div class="ui checkbox" style="width:5em;padding:0.4em 0.4em 0.4em 0">
						<input type="checkbox" :name="'accessLog' + index + 'Status1'" v-model="accessLog.status1" value="1" :id="'access-log-' + index + '-status1'"/>
						<label :for="'access-log-' + index + '-status1'">1xx</label>
					</div>
					<div class="ui checkbox" style="width:5em;padding:0.4em">
						<input type="checkbox" :name="'accessLog' + index + 'Status2'" v-model="accessLog.status2" value="1" :id="'access-log-' + index + '-status2'"/>
						<label :for="'access-log-' + index + '-status2'">2xx</label>
					</div>
					<div class="ui checkbox" style="width:5em;padding:0.4em">
						<input type="checkbox" :name="'accessLog' + index + 'Status3'" v-model="accessLog.status3" value="1" :id="'access-log-' + index + '-status3'"/>
						<label :for="'access-log-' + index + '-status3'">3xx</label>
					</div>
					<div class="ui checkbox" style="width:5em;padding:0.4em">
						<input type="checkbox" :name="'accessLog' + index + 'Status4'" v-model="accessLog.status4" value="1" :id="'access-log-' + index + '-status4'"/>
						<label :for="'access-log-' + index + '-status4'">4xx</label>
					</div>
					<div class="ui checkbox" style="width:5em;padding:0.4em">
						<input type="checkbox" :name="'accessLog' + index + 'Status5'" v-model="accessLog.status5" value="1" :id="'access-log-' + index + '-status5'"/>
						<label :for="'access-log-' + index + '-status5'">5xx</label>
					</div>
				</td>
			</tr>
			<tr v-if="accessLog.on && accessLog.storagePolicies.length > 0">
				<td class="color-border">选择输出的日志策略</td>
				<td>
					<div class="ui checkbox" v-for="policy in accessLog.storagePolicies" style="width:13em;padding:0.4em 0.4em 0.4em 0">
						<input type="checkbox" :name="'accessLog' + index + 'StoragePolicyIds'" :value="policy.id" :id="'access-log-storage-policy-' + policy.id" v-model="policy.isChecked"/>
						<label :for="'access-log-storage-policy-' + policy.id">{{policy.name}}<em style="font-size:0.8em;color:grey">（{{policy.type}}）</em></label>
					</div>
				</td>
			</tr>
			<tr v-if="accessLog.on && accessLog.storagePolicies.length > 0">
				<td class="color-border">是否只输出到日志策略</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" :name="'accessLog' + index + 'StorageOnly'" v-model="accessLog.storageOnly" value="1"/>
						<label></label>
					</div>
					<p class="comment">选中表示只输出日志到日志策略，而停止默认的日志存储。</p>
				</td>
			</tr>
		</tbody>
		<tbody v-show="advancedOptionsVisible">
			<tr>
				<td>是否开启统计</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="enableStat" v-model="enableStat"/>
						<label></label>
					</div>
				</td>
			</tr>
		</tbody>
	</table>

	<button class="ui button primary" type="submit">保存</button>
</form>
